 <template>
  <div id="main">
    <mt-header title="黑马程序员-Vue项目"></mt-header>
    <mt-swipe class="swipe-box" :auto="4000">
      <mt-swipe-item>
        <img width="100%" height="100%" src="../../static/img/apple.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        
        <img width="100%" height="100%" src="../../static/img/blueberry.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img width="100%" height="100%" src="../../static/img/blueberry.jpg" alt="">
      </mt-swipe-item>
    </mt-swipe>
    <div class="flex-box">
      <div class="item" v-for="(item,index) in dataList" :key="index" @click="$router.push(item.path)">
        <img width="40px" height="40px" :src="item.img" alt="">
        <span>{{item.name}}</span>
      </div>
      
    </div>
    <!-- <mt-range v-model="rangeValue"></mt-range> -->
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      rangeValue:10,
      active: 0,
      dataList:[
        {
          img:"../../static/assets/1.png",
          name:'新闻资讯',
          path:'/news'
        },
        {
          img:"../../static/assets/1.png",
          name:'图片分享',
          path:'/imgShare'
        },
        {
          img:"../../static/assets/1.png",
          name:'商品购买',
          path:'/goods'
        },
        {
          img:"../../static/assets/1.png",
          name:'留言反馈',
          path:'/messages'
        },
        {
          img:"../../static/assets/1.png",
          name:'视频专区',
          path:'/video'
        },
        {
          img:"../../static/assets/1.png",
          name:'联系我们',
          path:'/contact'
        },
      ]
    };
  }
};
</script>

<style scoped>
#main{
  width: 100%;
  height: 92vh;
}
.swipe-box{
  height: 30vh;
}
.flex-box{
  display: flex;
  flex-wrap: wrap;
}
.flex-box .item{
  display: flex;
  flex-flow: column;
  margin: 10px 0px;
  width: 25%;
}
.item>img{
  margin: auto;
}
</style>